<template>
  <div class="aside">
    <el-row class="tac">
      <el-col>
        <el-menu :default-active="defaultActiveIndex" class="el-menu-vertical-demo" :unique-opened="true">
          <el-menu-item index="0">
            <div>
              <img src="../../assets/imgs/logon.png" alt="" />
            </div>
          </el-menu-item>
          <router-link to="/classify">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span v-if="!someState" slot="title">商品分组</span>
            </el-menu-item>
          </router-link>
          <router-link to="/manage">
            <el-menu-item index="2">
              <i class="el-icon-setting"></i>
              <span v-if="!someState" slot="title">商品管理</span>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      // 映射 this.someState 为 store.state.someState
      someState: (state) => state.show,
    }),
    //计算defaultActiveIndex的值
    defaultActiveIndex() {
      switch (this.$route.path) {
        case "/classify":
          return "1";
        case "/manage":
          return "2";
        default:
          return this.$route.path === '/commodityPage' ? "2" : "1";
      }
    },
  },
  watch: {
    someState(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.aside {
  // height: 500px;
  overflow: hidden;

  ::v-deep .el-submenu__title {
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
  }

  a {
    text-decoration: none;
  }
}
</style>
